<template>
  <view class="rank-container">
    <!-- 顶部标签 -->
    <view class="tab-bar">
      <view class="tab-item">今日实时榜</view>
      <view class="tab-item">周榜</view>
    </view>

    <!-- 前三名展示 -->
    <view class="top-three">
      <view class="rank-item" v-for="(item, index) in topThree" :key="index">
        <view class="rank-num">{{ index + 1 }}</view>
        <view class="user-info">
          <image :src="item.avatar" class="avatar"></image>
          <view class="username">{{ item.username }}</view>
          <view class="score">在线时长:{{ item.score }}</view>
        </view>
      </view>
    </view>

    <!-- 排行榜列表 -->
    <view class="rank-list">
      <view class="list-item" v-for="(item, index) in rankList" :key="index">
        <view class="rank-num">{{ index + 4 }}</view>
        <view class="user-info">
          <image :src="item.avatar" class="avatar"></image>
          <view class="username">{{ item.username }}</view>
        </view>
        <view class="score">在线时长:{{ item.score }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      topThree: [
        { avatar: 'https://picsum.photos/100/100?random=1', username: '盛夏晚晴天', score: 1502 },
        { avatar: 'https://picsum.photos/100/100?random=2', username: '小云朵', score: 980 },
        { avatar: 'https://picsum.photos/100/100?random=3', username: '小柿子', score: 520 }
      ],
      rankList: [
        { avatar: 'https://picsum.photos/100/100?random=4', username: '从头再来', score: 510 },
        { avatar: 'https://picsum.photos/100/100?random=5', username: '懒猫女孩', score: 480 },
        { avatar: 'https://picsum.photos/100/100?random=6', username: '草莓果冻', score: 472 },
        { avatar: 'https://picsum.photos/100/100?random=7', username: '波妞', score: 415 }
      ]
    };
  }
};
</script>

<style scoped>
.rank-container {
 background: linear-gradient(45deg, #ffffff 0%, #68cc6b 99%, #f4f663 100%);
  padding: 20rpx;
  min-height: 100vh;
}

.tab-bar {
  display: flex;
  margin-bottom: 30rpx;
}

.tab-item {
  color: white;
  padding: 10rpx 20rpx;
  font-size: 28rpx;
}

.top-three {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30rpx;
}

.rank-item {
  text-align: center;
}

.rank-num {
  color: #aa0000;
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-bottom: 10rpx;
}

.username {
  color: orange;
  font-size: 28rpx;
    font-weight: bold;
  margin-bottom: 5rpx;
}

.score {
  color: #ffffff;
  font-size: 28rpx;
}

.rank-list {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  padding: 20rpx;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15rpx 0;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
}

.list-item:last-child {
  border-bottom: none;
}
</style>